<script setup lang="tsx">
import { ref } from 'vue';
import { useBoolean } from '@sa/hooks';
import { useTable, useTableOperate, useTableScroll } from '@/hooks/common/table';
import modal from '@/components/common/modal.vue';
import SearchBox from './modules/search.vue';
import AddForm from './modules/add-form.vue';

function colRender(obj: any) {
  const record: any = obj.record;
  const status = ['error', 'warning', 'success'];
  const statusText = ['未审核', '审核中', '已审核'];
  return (
    <span
      style={{
        color: `rgb(var(--${status[record.status]}-color))`
      }}
    >
      {statusText[record.status]}
    </span>
  );
}

function checkTypeRender(obj: any) {
  const record: any = obj.record;
  return <span>{['首检', '巡检'][record.checkType]}</span>;
}

const { columns, columnChecks, getData } = useTable({
  apiFn: (): any => {
    return {
      data: []
    };
  },
  columns: (): any[] => [
    {
      key: 'index',
      title: '序号',
      dataIndex: 'index',
      align: 'center',
      fixed: 'left',
      width: 122
    },
    {
      key: 'xh',
      title: '生产型号',
      dataIndex: 'xh',
      align: 'center',
      fixed: 'left',
      width: 122
    },
    {
      key: 'lot',
      title: 'LOT号',
      dataIndex: 'lot',
      align: 'center',
      width: 200
    },
    {
      key: 'status',
      title: '状态',
      dataIndex: 'status',
      align: 'center',
      width: 200,
      customRender: colRender
    },
    {
      key: 'time',
      title: '录入时间',
      dataIndex: 'time',
      align: 'center',
      width: 200
    },
    {
      key: 'checkType',
      title: '检测类型',
      dataIndex: 'checkType',
      align: 'center',
      customRender: checkTypeRender,
      width: 200
    },
    {
      key: 'pnl',
      title: '检验数量(PNL)',
      dataIndex: 'pnl',
      align: 'center',
      width: 200
    },
    {
      key: 'gctbgjc',
      title: '工程图变更检查',
      dataIndex: 'gctbgjc',
      align: 'center',
      width: 200
    },
    {
      key: 'bgcjs',
      title: '曝光尺级数',
      dataIndex: 'bgcjs',
      align: 'center',
      width: 200
    },
    {
      key: 'bgjh',
      title: '曝光机号',
      dataIndex: 'bgjh',
      align: 'center',
      width: 200
    },
    {
      key: 'xyjh',
      title: '显影机号',
      dataIndex: 'bgjh',
      align: 'center',
      width: 200
    },
    {
      key: 'yhysyq',
      title: '油墨颜色要求',
      dataIndex: 'yhysyq',
      align: 'center',
      width: 200
    },
    {
      key: 'ymyssj',
      title: '油墨颜色实际',
      dataIndex: 'ymyssj',
      align: 'center',
      width: 200
    },
    {
      key: 'zqyq',
      title: '周期要求',
      dataIndex: 'zqyq',
      align: 'center',
      width: 200
    },
    {
      key: 'zqsj',
      title: '周期实际',
      dataIndex: 'zqsj',
      align: 'center',
      width: 200
    },
    {
      key: 'Amymhdyq',
      title: 'A面油墨厚度要求',
      dataIndex: 'Amymhdyq',
      align: 'center',
      width: 200
    },
    {
      key: 'Amymhdsjz1',
      title: 'A面油墨厚度实际值1',
      dataIndex: 'Amymhdsjz1',
      align: 'center',
      width: 200
    },
    {
      key: 'Amymhdsjz2',
      title: 'A面油墨厚度实际值2',
      dataIndex: 'Amymhdsjz2',
      align: 'center',
      width: 200
    },
    {
      key: 'Amymhdsjz3',
      title: 'A面油墨厚度实际值3',
      dataIndex: 'Amymhdsjz3',
      align: 'center',
      width: 200
    },
    {
      key: 'Amymhdsjz3',
      title: 'A面油墨厚度实际值3',
      dataIndex: 'Amymhdsjz3',
      align: 'center',
      width: 200
    },
    {
      key: 'Amymhdsjz4',
      title: 'A面油墨厚度实际值4',
      dataIndex: 'Amymhdsjz4',
      align: 'center',
      width: 200
    },
    {
      key: 'Amymhdsjz5',
      title: 'A面油墨厚度实际值5',
      dataIndex: 'Amymhdsjz5',
      align: 'center',
      width: 200
    }
  ]
});

const data = ref<any[]>([]);

function mockData(total: number) {
  for (let i: number = 0; i < total; ++i) {
    data.value.push({
      id: i + 1,
      index: i + 1,
      xh: 'HP4503202B0-A',
      lot: '1240714029002-01',
      status: Math.floor(Math.random() * 3),
      time: '2024-07-23 11:35:00',
      checkType: Math.floor(Math.random() * 2),
      pnl: 2,
      gctbgjc: '核对无异常',
      bgcjs: 11,
      bgjh: '9#',
      xyjh: '3#',
      yhysyq: 'R-4000 G23K',
      ymyssj: '一致',
      zqyq: '不是阻焊周期',
      zqsj: '/',
      Amymhdyq: '10',
      Amymhdsjz1: '26.9',
      Amymhdsjz2: '25.2',
      Amymhdsjz3: '25.3',
      Amymhdsjz4: '26.0',
      Amymhdsjz5: '26.2'
    });
  }
  console.log('data.value :>> ', data.value);
}

mockData(100);

const { checkedRowKeys, rowSelection, onBatchDeleted, onDeleted } = useTableOperate(data, getData);

// const { bool: formVisible, setTrue: openFormModal } = useBoolean();

const formVisible = ref(false);

function add(type: 'add' | 'edit') {
  formVisible.value = true;
}
function reset() {}

function searchFn() {}

const mainPageRef = ref(null);
</script>

<template>
  <div ref="mainPageRef" class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <SearchBox @reset="reset" @search="searchFn" />
    <ACard
      :bordered="false"
      :body-style="{ flex: 1, overflow: 'hidden' }"
      class="table-card flex-col-stretch sm:flex-1-hidden card-wrapper"
    >
    <template #title>
      <AButton type="primary" size="small" ghost class="mini-btn mr-8px" @click="add('add')">
          <template #icon>
            <icon-ic-round-add class="align-sub text-icon" />
          </template>
          <span class="ml-3px">新增</span>
        </AButton>
        <AButton type="primary" size="small" ghost class="mini-btn mr-8px" @click="add('edit')">
          <template #icon>
            <icon-ic-round-edit class="align-sub text-icon" />
          </template>
          <span class="ml-3px">修改</span>
        </AButton>
        <!-- :disabled="disabledDelete" -->
        <AButton size="small" danger class="mini-btn mr-8px">
          <template #icon>
            <icon-ic-round-delete class="align-sub text-icon" />
          </template>

          <span class="ml-3px">批量删除</span>
        </AButton>
        <AButton size="small" type="primary" ghost class="mini-btn mr-8px">
          <template #icon>
            <icon-local-downward class="align-sub text-icon" />
          </template>
          <span class="ml-3px">导出</span>
        </AButton>
    </template>
      <template #extra>

        <TableColumnSetting v-model:columns="columnChecks" />
      </template>
      <ATable
        ref="tableWrapperRef"
        :columns="columns"
        :data-source="data"
        bordered
        size="small"
        :row-selection="rowSelection"
        row-key="id"
        :scroll="{ x: 1500, y: 2000 }"
        class="h-full"
      />
      <!-- :loading="loading" -->
      <!-- <FormModal v-model:visible="formVisible" :main-ref="mainPageRef" /> -->
      <Modal v-model:visible="formVisible" title="阻焊记录表新增" height="80vh" width="80vw">
        <AddForm />
      </Modal>
    </ACard>
  </div>
</template>

<style scoped></style>
